(function ($) {
    "use strict";
    $.fn.extend({
        // 轮播图思路：所有图片默认都在外面等待，切换时，前一个划走，当前进入视口
        banner: function (items, ops = {}) {
            const that = this;
            // 1.处理默认参数
            let {
                prev = true, next = true, list = true, autoplay = true, index = 0, moveTime = 300, delayTime = 3000
            } = ops;

            let prevIndex;
            // 2、创建图片列表
            let str = "";
            items.forEach(val => {
                str += `<a href="#">
                            <img src="${val.src}" alt="${val.alt}" />
                        </a>`;
            });
            console.log(that.children());
            const imgs = $(`<div class="imgBox">${str}</div>`).appendTo(that).children("a").eq(index).css({
                left: 0
            }).end();
            // 3、创建左右按钮
            if (prev && next) {
                $("<div class='btns'></div>")
                    .append($("<input type='button' class='prev' value='&lt;' />"))
                    .append($("<input type='button' class='next' value='&gt;' />"))
                    .appendTo(this)
                    .click('click', '.prev', leftClickFn)
                    .click('click', '.next', rightClickFn);
            }

            function leftClickFn() {
                if (index === 0) {
                    index = items.length - 1;
                    prevIndex = 0;
                } else {
                    index--;
                    prevIndex = index + 1;
                }
                moveFn(prevIndex, index, 1);
            }

            function rightClickFn() {
                if (index === items.length - 1) {
                    index = 0;
                    prevIndex = items.length - 1;
                } else {
                    index++;
                    prevIndex = index - 1;
                }
                moveFn(prevIndex, index, -1);
            }
            // 4、创建分页器
            if (list) {
                let str = "";
                items.forEach(() => {
                    str += `<span></span>`;
                })
                $(`<div class="list">${str}</div>`)
                .appendTo(that)
                .children("span")
                .on("click", function () {
                    if ($(this).index() > index) {
                        d = -1;
                    } else {
                        d = 1;
                    }
                    moveFn(index, $(this).index(), d);
                    index = $(this).index;
                })
                // 当前分页器高亮
                .eq(index).addClass("activeListSpan")
                .siblings().removeClass("activeListSpan");
            }

            // 5、运动函数
            function moveFn(p, n, d) {
                imgs.eq(p).css({
                        left: 0
                    }).stop().animate({
                        left: imgs.eq(0).width() * d
                    }, moveTime)
                    .end().eq(n).css({
                        left: -imgs.eq(0).width() * d
                    }).stop().animate({
                        left: 0
                    }, moveTime)
                // 当前分页器显示高亮
                that.children("list")
                    .children("span").eq(n).addClass("activeListSpan")
                    .siblings().removeClass("activeListSpan");
            }

            // 6、自动运动
            if (autoplay) {
                let t = setInterval(() => {
                    rightClickFn();
                }, delayTime);
                this.on('mouseover', function () {
                    clearInterval(t);
                }).on('mouseout', function () {
                    t = setInterval(() => {
                        rightClickFn();
                    }, delayTime);
                })
            }
        }
    })
})(jQuery);